<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import myAxios from '../../plugins/myAxios.ts';
import { Toast } from 'vant';
import qs from 'qs';
import UserCardList from '../../components/UserCardList.vue';

const route = useRoute();
const tagsQuery = route.query.tags; // 注意：这可能是一个字符串或undefined
const tags = Array.isArray(tagsQuery) ? tagsQuery : (tagsQuery ? [tagsQuery] : []); // 转换为数组
const loading = ref(true); // 初始时设置为加载状态
const userList = ref([]);

onMounted(async () => {
  try {
    const response = await myAxios.get('/user/search/tags', {
      params: {
        tagNameList: tags.join(','), // 假设后端需要逗号分隔的标签列表
        currentPage: 1
      },
      paramsSerializer: params => {
        return qs.stringify(params, { indices: false });
      }
    });
    //console.log('/user/search/tags succeed', response);
    const userListData = response.data.records;
    userListData.forEach(user => {
      user.tags = JSON.parse(user.tags); // 假设tags是JSON字符串
    });
    userList.value = userListData;
    loading.value = false; // 请求成功，设置加载状态为false
  } catch (error) {
    //console.error('/user/search/tags error', error);
    Toast.fail('请选择标签');
    loading.value = false; // 即使请求失败，也设置加载状态为false
  }
});
</script>

<template>
  <user-card-list :user-list="userList" :loading="loading"/>
  <van-empty v-if="loading || (!userList || userList.length === 0)" description="搜索结果为空"/>
  <!-- 注意：这里同时考虑了loading状态和userList是否为空 -->
</template>

<style scoped>
/* 您的样式代码 */
</style>
